<template>
  <div id="datatype">
    <!-- 资料类型 -->
    <div class="header">
      <h1
        style="
          font-weight: 700;
          font-style: normal;
          font-size: 24px;
          color: rgb(52, 69, 99);
        "
      >
        资料类型
      </h1>
      <el-button
        size="mediu"
        round
        type="primary"
        style="color: #fff"
        @click="openAdd = true"
        >添加分类</el-button
      >
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="categoryName"
        label="类别名称"
        align="center"
        width="200"
      >
      </el-table-column>
      <el-table-column prop="dataCount" label="资料数" align="center">
      </el-table-column>
      <el-table-column label="更新时间" align="center">
        <template slot-scope="scope">{{
          scope.row.updateTime | timeFn
        }}</template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            plain
            size="mini"
            @click="openEditFn(scope.row)"
            ><i class="el-icon-edit-outline" style="font-size: 15px"></i
          ></el-button>
          <el-button
            type="danger"
            plain
            size="mini"
            @click="openDelFn(scope.row.categoryId)"
            ><i class="el-icon-delete" style="font-size: 15px"></i
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="footer">
      <div class="block">
        <el-pagination
          @current-change="pageBtn"
          :current-page.sync="page"
          :page-size="count"
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 添加 -->
    <el-dialog title="新增分类" :visible.sync="openAdd">
      <el-form
        :model="formAdd"
        :rules="rulesFormAdd"
        ref="formAdd"
        class="demo-ruleForm"
      >
        <el-form-item
          label="分类名称"
          :label-width="formLabelWidth"
          prop="categoryName"
        >
          <el-input
            v-model="formAdd.categoryName"
            autocomplete="off"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openAdd = false">取 消</el-button>
        <el-button type="primary" @click="addBtn('formAdd')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑分类" :visible.sync="openEdit">
      <el-form
        :model="formEdit"
        :rules="rulesFormEdit"
        ref="formEdit"
        class="demo-ruleForm"
      >
        <el-form-item
          label="类型编号"
          :label-width="formLabelWidth"
          prop="categoryId"
        >
          <el-input
            v-model="formEdit.categoryId"
            autocomplete="off"
            disabled
            placeholder="请输入编号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="分类名称"
          :label-width="formLabelWidth"
          prop="categoryName"
        >
          <el-input
            v-model="formEdit.categoryName"
            autocomplete="off"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="资料数"
          :label-width="formLabelWidth"
          prop="dataCount"
        >
          <el-input
            v-model="formEdit.dataCount"
            autocomplete="off"
            disabled
            placeholder="请输入资料数"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openEdit = false">取 消</el-button>
        <el-button type="primary" @click="editBtn('formEdit')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog title="删除确认" :visible.sync="openDel">
      删除该条客户信息后将不可恢复，确认删除？
      <div slot="footer" class="dialog-footer">
        <el-button @click="openDel = false">取 消</el-button>
        <el-button type="primary" @click="delBtn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      page: 1,
      count: 5,
      total: 0,
      tableData: [],
      openAdd: false,
      formAdd: {
        categoryName: "",
      },
      rulesFormAdd: {
        categoryName: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
        ],
      },
      openEdit: false,
      formEdit: {
        categoryId: 0,
        categoryName: "",
        dataCount: 0,
      },
      rulesFormEdit: {
        categoryName: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
        ],
      },
      openDel: false,
      delId: 0,
      formLabelWidth: "120px",
    };
  },
  filters: {
    timeFn: function (v) {
      if (v) {
        let date = new Date(v);
        return (
          date.getFullYear() +
          "-" +
          [
            date.getMonth() + 1 < 10
              ? "0" + (date.getMonth() + 1)
              : date.getMonth() + 1,
          ] +
          "-" +
          [date.getDate() < 10 ? "0" + date.getDate() : date.getDate()]
        );
      }
    },
  },
  methods: {
    render: function () {
      this.$axios({
        url: "/equipmentData/list",
        params: {
          limit: this.count,
          page: this.page,
        },
      }).then(({ data }) => {
        // console.log(data);
        if (data.code == 0) {
          this.tableData = data.data;
          this.total = data.total;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    pageBtn(val) {
      this.render();
    },
    addBtn: function (f) {
      this.$refs[f].validate((v) => {
        if (v) {
          this.$axios({
            url: "/equipmentData/add",
            method: "post",
            data: {
              categoryName: this.formAdd.categoryName,
              updateTime: new Date(),
            },
          }).then(({ data }) => {
            if (data.code == 0) {
              this.$message.success("添加成功！");
              this.openAdd = false;
              this.render();
            } else {
              this.$message.error("添加失败！");
            }
          });
        } else {
          this.$message.error("请完善添加内容！");
        }
      });
    },
    openEditFn: function (v) {
      this.formEdit.categoryId = v.categoryId;
      this.formEdit.categoryName = v.categoryName;
      this.formEdit.dataCount = v.dataCount;
      this.openEdit = true;
    },
    editBtn: function (f) {
      this.$refs[f].validate((v) => {
        if (v) {
          this.$axios({
            url: "/equipmentData/update",
            method: "put",
            data: {
              categoryId: this.formEdit.categoryId,
              categoryName: this.formEdit.categoryName,
              dataCount: this.formEdit.dataCount,
              updateTime: new Date(),
            },
          }).then(({ data }) => {
            if (data.code == 0) {
              this.$message.success("修改成功！");
              this.openEdit = false;
              this.render();
            } else {
              this.$message.error("修改失败！");
            }
          });
        } else {
          this.$message.error("请完善修改内容！");
        }
      });
    },
    openDelFn: function (v) {
      this.delId = v;
      this.openDel = true;
    },
    delBtn: function () {
      this.$axios({
        url: "/equipmentData/delete",
        method: "delete",
        params: {
          categoryId: this.delId,
        },
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message.success("删除成功！");
          this.openDel = false;
          this.render();
        } else {
          this.$message.error("删除失败！");
        }
      });
    },
  },
  mounted: function () {
    this.render();
  },
};
</script>

<style lang="less" scoped>
#datatype {
  padding: 30px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
  }
  .footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
  }
}
</style>